<template>
	<view class="">
		<el-dialog :visible.sync="show1" width="80%" @close="handleClose" zIndex="100" top="10px">

			<view class="u-flex">
				<uploadImg :canSetHeader="true" @upload="(images)=>{params.images = images}"
					@remove="(images)=>{params.images = images}" :Images="params.images" title="课效图"
					@setHeader="(images)=>{params.images = images}" :artPptNum="params.number" />

				<uploadImg :canSetHeader="true" @upload="(images)=>{params.longImages = images}"
					@remove="(images)=>{params.longImages = images}" :Images="params.longImages || []" title="预览图"
					@setHeader="(images)=>{params.longImages = images}" :artPptNum="params.number" />
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">编号：</view>
				<el-input placeholder="请输入编号" v-model="params.number" size="mini" type="number" />
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">标题：</view>
				<el-input placeholder="请输入标题" v-model="params.title" size="mini" />
				<view @click="uploadPPtFile()">选择文件</view>
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">描述：</view>
				<el-input placeholder="请输入描述" v-model="params.desc" size="mini" type="textarea" />
			</view>

			<view class="display_flex_bet u-m-b-20">
				<picker :range="fileTypeList" @change="(e)=>params.fileType = fileTypeList[e.detail.value]">
					<view class="display_flex u-m-b-20">
						<view style="width: 220rpx;">资源类型：</view>
						<el-input placeholder="请选择资源类型" v-model="params.fileType" size="mini" readonly />
					</view>
				</picker>

				<view class="display_flex">
					<view style="width: 130rpx;">价格：</view>
					<el-input placeholder="请输入价格" v-model="params.price" size="mini" type="number" />
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex u-m-b-20">
					<view style="width: 130rpx;">专题：</view>
					<el-select v-model="params.typeDesc" placeholder="请选择专题" size="mini" style="width: 100%;"
						@change="(e)=>{params.typeId = e}">
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</view>
				<view class="display_flex u-flex-1 u-row-right">
					<view style="width: 140rpx;">教案工具：</view>
					<!-- <el-select v-model="params.classDesc" placeholder="请选择教案工具" size="mini" style="width: 100%;"
						@change="(e)=>{params.classId = e}">
						<el-option v-for="item in classes" :key="item.value" :label="item.label" :value="item.value" />
					</el-select> -->
					<el-input v-model="params.classDesc" placeholder="请输入教案工具" size="mini" style="width: 120px;" />
					<picker :range="classes" range-key="label" @change="changeClass">
						<text style="margin-left: 20rpx;" class="u-type-primary">选择教案工具</text>
					</picker>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex">
					<view style="width: 150rpx;">最小年龄：</view>
					<el-select v-model="params.ageMin" placeholder="请选择适合年龄的最小值" size="mini">
						<el-option v-for="item in optionsNianLing" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</view>

				<view class="display_flex">
					<view style="width: 150rpx;">最大年龄：</view>
					<el-select v-model="params.ageMax" placeholder="请选择适合年龄的最大值" size="mini">
						<el-option v-for="item in optionsNianLing" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">下载：</view>
					<el-input placeholder="请输入下载次数" v-model="params.downLoadNum" size="mini" />
				</view>

			
				<view class="display_flex">
					<view>是否是精选内容：</view>
					<el-switch v-model="params.isNice"></el-switch>
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">标签：</view>
					<view class="display_flex" style="width: calc(100% - 130rpx);">
						<view v-for="(item,index) in params.tags" class="u-m-r-10 u-border display_flex u-p-6 u-font-12">
							<input placeholder="请输入标签" size="mini" @input="inputVlaue($event,index)" :value="item" />
							<i class=" el-icon-remove-outline u-m-r-20 u-font-16" @click="params.tags.splice(index,1)"
								v-if="index != 0" />
							<i class="el-icon-plus u-font-16" @click="params.tags.push('')" />
						</view>
					</view>
				</view>
				<view class="display_flex u-m-b-20" v-if="params.classDesc != '课程'">
					<view style="width: 180rpx;">关联课程：</view>
					<el-select v-model="params.linkCourse.label" placeholder="请选择课程" size="mini" style="width: 600rpx;" filterable
						clearable @change="selectCourse">
						<el-option v-for="item in artPPTCourse" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</view>
			</view>

			<view class="u-m-b-20 display_flex">
				<view class="display_flex u-flex-1">
					<view style="width: 240rpx;">百度云盘链接：</view>
					<el-input placeholder="百度云盘链接" size="mini" class="u-m-r-10" v-model="params.baiduDeskLink"
						style="width: 600rpx;" />
					<view class="u-flex" v-if="params.classDesc == '课程'">
						<view style="width: 240rpx;">课件数量：</view>
						<el-input placeholder="课件数量" size="mini" class="u-m-r-10" v-model="params.page" />
					</view>
				</view>
			</view>

			<view class="u-m-b-20">
				<uploadImg @upload="(images)=>{params.baiduDeskImage = images[0]}"
					@remove="(images)=>{params.baiduDeskImage = ''}" :Images="params.baiduDeskImage? [params.baiduDeskImage]:[]"
					title="百度网盘小程序下载图" :artPptNum="params.number" />
			</view>

			<view class="display_flex">
				<view class="display_flex u-flex-1 u-m-b-20">
					<view style="width: 200rpx;">获取方式：</view>
					<el-checkbox-group v-model="params.getType" @change="changeGetType">
						<el-checkbox v-for="item in getTypes" :label="item"></el-checkbox>
					</el-checkbox-group>
				</view>
				
				<view class="display_flex">
					<view style="width: 200rpx;">审核状态：</view>
					<el-radio-group v-model="params.statusDesc" size="mini">
						<el-radio-button label="已审核"></el-radio-button>
						<el-radio-button label="未审核"></el-radio-button>
					</el-radio-group>
				</view>

			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	var COS = require('cos-nodejs-sdk-v5');
	import chooseFile from '@/js_sdk/tencentcloud/choose-file.js';
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	let that
	export default {
		components: {},
		props: {
			detail: {
				type: Object,
				default: {}
			},
			classDesc: {
				type: String,
				default: "书法"
			}
		},

		data() {
			return {
				show1: true,
				getTypes: ["广告", "付费"],
				myConfig: {
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
				},
				params: {
					title: "",
					number: this.common.getArtpptNum(),
					fileType: '课件',
					desc: "",
					classDesc: '',
					classId: '',
					size: '',

					content: "",
					page: 1,
					//groupNum: 0,
					price: 2,
					images: [],
					longImages: [],
					baiduDeskImage: '',
					//age: '通用',
					tags: [""],
					videoUrl: '',
					fileUrls: [],
					type: '单个',
					isNice: false,
					typeDesc: '',
					typeId: "",
					status: 1,
					statusDesc: "已审核",
					baiduDeskLink: '',
					ageMin: 3,
					ageMax: '',
					downLoadNum: Math.floor(Math.random() * (1000)),
					linkCourse: {
						label: '',
						value: ''
					},
					getType: ["广告", "付费"]
				},
				classes: [],
				optionsNianLing: [],

				typeOptions: [],
				optionTypes: [{
					value: '单个',
					label: '单个'
				}, {
					value: '合集',
					label: '合集'
				}],
				fileTypeList: ["课件", "素材"],
				artPPTCourse: [],
			}
		},

		mounted() {
			that = this

			var cos = new COS({
				SecretId: "AKIDuc5GAnAG5duuHQJwHL8fusZz80bvykFT", // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
				SecretKey: "zh8IAm7BxSgdJhpgFXZJmzvd5HDrEK9g", // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
			});

			for (let i = 3; i <= 30; i++) {
				let item = {
					label: i,
					value: i
				}
				that.optionsNianLing.push(item)
			}

			if (that.detail) {
				that.detail.getType = that.detail.getType || ["广告", "付费"]
				that.detail.classId = that.detail.ClassId
				if (that.detail.linkCourse && that.detail.linkCourse.objectId) {
					that.detail.linkCourse.label = that.detail.linkCourse.name
					that.detail.linkCourse.value = that.detail.linkCourse.objectId
				} else {
					that.detail.linkCourse = {
						label: '',
						value: ''
					}
				}
				that.params = JSON.parse(JSON.stringify(that.detail))
				that.$forceUpdate()
			}

			that.common.rightApi("admin/artType/list", {}).then(res => {
				res.data = res.data || []
				for (let item of res.data) {
					item.value = item.objectId
					item.label = item.name
				}
				res.data.unshift({
					value: "",
					label: "全部"
				})
				that.typeOptions = res.data

				that.classes = []
				that.common.rightApi("admin/artClass/list", {}).then(res => {
					let classList = res.data
					for (let item of classList) {
						let optionItem = {
							value: item.objectId,
							label: item.name
						}
						that.classes.push(optionItem)
					}
				})
			})

			if (that.classDesc == "书法") {
				that.params.classDesc = ""
				that.params.fileType = "书法"
			} else {
				that.$http.Post("admin/artPPT/list", {
					pageSize: 20,
					pageNum: 1,
					fileType: '课程',
					searchText: '',
					isNice: false,
					status: '全部',
				}, "加载中...").then(res => {
					for (let item of res.data) {
						item.value = item.objectId
						item.label = item.title
					}
					that.artPPTCourse = res.data
				})
			}
		},

		methods: {

			changeGetType(val) {
				console.log(val)
				that.params.getType = val
			},

			selectCourse(value) {
				let index = that.artPPTCourse.findIndex(item => item.objectId == value)
				if (index != -1) {
					that.params.linkCourse = {
						value: that.artPPTCourse[index].objectId,
						label: that.artPPTCourse[index].title,
					}
				} else {
					that.params.linkCourse = {
						value: '',
						label: '',
					}
				}
			},

			changeClass(e) {
				that.params.classDesc = that.classes[e.detail.value].label
				if (that.params.classDesc == "书法") {
					that.params.fileType = "书法"
				}
			},

			//新增合集
			addHeJi() {
				that.params.fileUrls.push({
					title: '',
					desc: '',
					fileUrl: '',
					baiduDeskLink: '',
					page: 4,
					size: 0,
				})
				that.common.showToast("成功")
			},

			//上传ppt
			uploadPPtFile(item) {
				let fileType = ".ppt,.pdf,.pptx,.doc"
				if (that.params.fileType == "素材") fileType = '.png,.jpg,.jpeg'
				chooseFile(fileType, false).then(async res => {
					for (let file of res) {
						if (file.name) {
							that.params.title = file.name
							that.params.desc = file.name
							that.params.size = that.change(file.size)
							if (that.params.title.indexOf(".") != -1) that.params.title = that.params.title
								.split(".")[0]
							if (that.params.title.indexOf("、 ") != -1) {
								that.params.title = that.params.title
									.split("、 ")[1]
								that.params.desc = that.params.title
									.split("、 ")[1]
							}

							if (that.params.title.indexOf("《") != -1) that.params.title = that.params.title
								.split("《")[1]
							if (that.params.title.indexOf("》") != -1) that.params.title = that.params.title
								.split("》")[0]
						}
					}
				})
			},

			//删除文件
			clearFile(fileUrl) {
				let that = this
				that.$http.Post("txMac/deleteCosFile", {
					imageUrl: fileUrl
				}, "删除中").then(res => {
					if (that.params.type == "单个") {
						that.params.fileUrls = []
					}
				})
			},

			handleClose() {
				this.$emit("close", true)
			},

			inputVlaue(e, index) {
				that.params.tags[index] = e.detail.value
			},

			confirmAdd() {
				this.params.isAdmin = true
				this.$http.Post("admin/artPPT/save ", this.params).then(res => {
					this.$emit("save", true)
				})
			},

			change(limit) {
				var size = "";
				if (limit < 0.5 * 1024) { //小于0.1KB，则转化成B
					size = limit.toFixed(2) + "B"
				} else if (limit < 0.5 * 1024 * 1024) { //小于0.1MB，则转化成KB
					size = (limit / 1024).toFixed(2) + "KB"
				} else if (limit < 0.5 * 1024 * 1024 * 1024) { //小于0.2GB，则转化成MB
					size = (limit / (1024 * 1024)).toFixed(2) + "MB"
				} else { //其他转化成GB
					size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
				}

				var sizeStr = size + ""; //转成字符串
				var index = sizeStr.indexOf("."); //获取小数点处的索引
				var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
				if (dou == "00") { //判断后两位是否为00，如果是则删除00                
					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
				}
				return size;
			},


		}
	}
</script>

<style>
	.display_flex {
		display: flex;
		align-items: center;
	}
</style>